<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title></title>
	<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" th:href="@{/css/baguetteBox.min.css}">
	<link rel="stylesheet" th:href="@{/css/thumbnail-gallery.css}">
	<link rel="stylesheet" type="text/css" th:href="@{/css/normalize.css}" /><!--CSS RESET-->
	<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
	<!--ssMenu CSS-->
    <link rel="stylesheet" th:href="@{/css/ss-menu.css}">
    <link rel="stylesheet" th:href="@{/css/demo.css}">

    
</head>
<body>
	
	<div th:replace="header :: html"></div>
	
	<div class="htmleaf-container">
		
		<nav class="ss-menu ">
	 <ul>
	   
	    <li><a th:href="@{/sheet/huayu}"><i class="fa fa-bar-chart"></i> 华语</a></li>
	    <li><a th:href="@{/sheet/yueyu}"><i class="fa fa-heartbeat"></i> 粤语</a></li>
	    <li><a th:href="@{/sheet/rihan}"><i class="fa fa-bank"></i> 日韩</a></li>
	    <li><a th:href="@{/sheet/oumei}"><i class="fa fa-cc-paypal"></i>欧美</a></li>
	    
	  
	 </ul>
	</nav>
		
		
		<div class="container gallery-container">

		    
		    <div class="tz-gallery">

		        <div class="row">
				<div th:each="s,stat:${huayu}">
		            <div class="col-sm-6 col-md-4">
		                <div class="thumbnail">
		                    <a>
		                        <img style="width:200px;height:200px;" th:src="${s.sheet_pic}" >
		                    </a>
		                    <div class="caption">
		                        <h3 th:text="${s.sheet_name}"></h3>
		                        </div>
		                </div>
		            </div>
		           
		            </div>
		          
		            </div>
		        </div>
</div>
		    </div>

		
	
	<script th:src="@{/js/jquery-1.11.0.min.js}" type="text/javascript"></script>
	<script th:src="@{/js/jquery.ss.menu.js}"></script>
	<script type="text/javascript" th:src="@{/js/baguetteBox.min.js}"></script>
	<script type="text/javascript">
		baguetteBox.run('.tz-gallery');
	
	$(function(){
           var ssMenu = $(".ss-menu");
           var theme = $(".theme-picker").find("span");
         
            $(theme).click(function(y){
            
              y = $(this).attr("class");
              
              $(ssMenu).removeClass().addClass("ss-menu " +y); //Aaah what a nice 
              
                 
            });
         
            $(".set-default").click(function(){
                   $(ssMenu).removeClass().addClass("ss-menu default");
            
            });
         
         });
         
          $(document).ready(function(){
	 
	   $(".ss-menu").ssMenu();
	 	
	 }); 
	 
	</script>
	
</body>
</html>